<template>
	<div id="menu" class="row mt-3">
		<div class="col-sm-12 col-md-8">
			<table class="table table-border">
				<thead>
					<tr>
						<th>品名/尺寸</th>
						<th>价格</th>
						<th>添加</th>
					</tr>
				</thead>
				<tbody v-for ="item in getMenu" :key ="item.name">
					<tr class="text-success"><td>{{item.name}}</td></tr>
					<tr v-for ="option in item.options" :key ="option.size">
						<td>{{option.size}}</td>
						<td>￥{{option.price}}</td>
						<td><button 
							class="btn btn-sm btn-outline-success"
							@click ="addCart(item,option)"
							>+</button></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="col-sm-12 col-md-4">
			<div v-if ="this.shopCart.length > 0">
				<table class="table">
					<thead>
						<tr>
							<th>数量</th>
							<th>品种</th>
							<th>价格</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for ="item in shopCart">
							<td>
								<button 
								class="btn btn-sm btn-outline-success"
								@click ="reduce(item)"
								>-</button>
								<span class="quan">{{item.quantity}}</span>
								<button 
								class="btn btn-sm btn-outline-success"
								@click ="insert(item)"
								>+</button>
							</td>
							<td>{{item.name}}-{{item.size}}寸</td>
							<td>￥{{item.price * item.quantity}}</td>
						</tr>

					</tbody>
				</table>
				<p class="text-success">总价：{{totalPrice}}</p>
				<button @click ="pay" class="btn btn-block btn-success">结账</button>
			</div>
			<div v-else>
				<h4>您还没添加任何商品到购物车！</h4>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	data(){
		return {
			shopCart:[],
		}
	},
	created(){
		this.$http.get('https://d.apicloud.com/mcm/api/pizzaMenu').then((res) =>{
			// console.log(res.data);
			this.$store.commit('setpizaadata',res.data);
		}).catch(err =>{console.log(err)})
	},
	computed:{
		getMenu(){
			return this.$store.state.pizzadata;
		},
		totalPrice(){
			let total = 0;
			for(let val of this.shopCart){
				total += val.quantity * val.price;
			}
			return '￥ '+total;
		}
	},
	methods:{
		addCart(item,option){
			// console.log(item,option);
			let data = {
				name:item.name,
				size:option.size,
				price:option.price,
				quantity:1,
			};
			if (this.shopCart.length > 0 ) {
				// 方法一
				// let result = this.shopCart.filter(function(val) {
				// 	let filterarr = ['name','size','price'];
				// 	let cartString = JSON.stringify(val,filterarr);
				// 	let dataString = JSON.stringify(data,filterarr);
				// 	return cartString.indexOf(dataString) > -1;
				// });

				// 返回一个已经在购物车里的数组
				let result = this.shopCart.filter(function(val) {
					return val.name == data.name && val.size == data.size && val.price == data.price;
				});
				if (result!=null && result.length) {
					// console.log('购物车里已经有了该商品');
					result[0].quantity++;
				}else{
					this.shopCart.push(data);
				}
			}else{
				this.shopCart.push(data);
			}
		},
		insert(item){
			item.quantity++;
		},
		reduce(item){
			item.quantity--;
			if (item.quantity <= 0) {
				/*splice 易拼错*/
				this.shopCart.splice(this.shopCart.indexOf(item),1);
			}
		},
		pay(){
			if (confirm(`您确定要支付${this.totalPrice}元`)) {
				alert("温馨提示：支付服务暂未开通，我们会为您尽快开通的！");
			}
		}
	}
};
</script>
<style type="text/css" scoped>
	span.quan{
		display: inline-block;
		width: 28px;
		text-align: center;
	}
</style>